<extend name="Include:Layout"/>
<block name="title">我的消费记录</block>
<block name="style">
<style>

</style>
</block>

<block name="main">
	<div class="weui_tab">
		<div class="weui_navbar">
			<div class="toolbar">
		        <div class="toolbar-inner">
		            <a href="javascript:history.go(-1);" class="picker-button close-popup">关闭</a>
		            <h1 class="title" id="banji_title">我的消费记录</h1>
		        </div>
		    </div>
		</div>
		<div class="weui_tab_bd" id="content">
			<div id="content_detail"></div>
			<div class="weui-infinite-scroll">
				<div class="infinite-preloader"></div>
			</div>
		</div>
	</div>


<script type="text/html" id="myxiaofei">
	{{each data as value i}}
	<div class="weui_media_text" style="background:#fff;margin-bottom:10px;">
		<div class="weui_media_box">
      		<h4 class="weui_media_title">订单号：{{value.id}}</h4>
      		<p class="weui_media_desc">
      			消费时间：{{value.time}}<br>
      			消费金额：{{value.cost}}<br>
    			{{value.desc}}
      		</p>
		</div>
    </div>
    {{/each}}
    
</script>
</block>

<block name="script">
<script>
$(function () {
	
    //缴费记录
	$.showLoading("正在加载...");
	$('#content_detail').html('');
	$.get('/home/home/get_xiaofei',function(ret){
		if(ret.status){
			var html = template("myxiaofei",ret);
			$('#content_detail').html(html);
			$.hideLoading();
			$('#content').infinite();
			//$("#page_container").popup();
			
			var loading = false;  //状态标记
			$('#content').infinite().on("infinite", function() {
				
			  	if(loading) return;
			  	loading = true;
			  	$.showLoading("正在加载...");
			  	$.get('/home/home/get_xiaofei',function(ret){
			  		var html = template("myxiaofei",ret);
			  		$('#content_detail').append(html);
			  		loading = false;
			  		$.hideLoading();
			  	});
			});
		}else{
			$.alert(ret.info);
		}
	});
		
});
</script>
</block>